<template>
    <div class="tenantAuthContainer">
        <div class="searchContainer">
            <TenantAuthSearch />
        </div>
        <div class="insertContainer">
            <el-button type="primary" plain size="small" icon="PlusOutlined" @click="addTenantAuthInfo()">添 加</el-button>
        </div>
        <div>
            <el-table
                :data="tenantAuthDataList.dataList"
                style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                row-key="id"
                border
                :stripe="true"
                :show-overflow-tooltip="true"
                class="tableContainer"
                max-height="70vh"
            >
                <el-table-column prop="tenantId" label="租户ID" />
                <el-table-column prop="tenantNameCn" label="租户名称-中文" />
                <el-table-column prop="userAccount" label="授权用户" />
                <el-table-column prop="createDate" label="创建时间" />
                <el-table-column prop="createBy" label="创建人" />
                <el-table-column align="center">
                    <template #header>
                        <span>操 作</span>
                    </template>
                    <template #default="scope">
                        <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                v-model:current-page="tenantAuthDataList.pageIndex"
                v-model:page-size="tenantAuthDataList.pageSize"
                :small="false"
                :background="true"
                layout="prev, pager, next, jumper, sizes, total"
                :total="tenantAuthDataList.recordCount"
                @change="changePage"
                :page-sizes="[10, 20, 30, 50, 100, 200, 400]"
                style="float: right"
            />
        </div>

        <div>
            <TenantAuthAddDialog :tenantAuthDataForm="tenantAuthDataForm"/>
        </div>

        <div>
            <TenantAuthDeleteDialog :tenantAuthDataForm="tenantAuthDataForm"/>
        </div>
    </div>
</template>

<script name="TenantAuth" setup lang="ts">
import {tenantAuthInfoQuery} from "@/request/tenant";
import {createTag} from "@/utils/ywuCommon";
import TenantAuthSearch from "@/components/userRoleManage/tenantAuthManange/TenantAuthSearch.vue";
import TenantAuthDeleteDialog from "@/components/userRoleManage/tenantAuthManange/TenantAuthDeleteDialog.vue";
import TenantAuthAddDialog from "@/components/userRoleManage/tenantAuthManange/TenantAuthAddDialog.vue";
import {computed, ref} from "vue";
import {useTenantAuthStore} from "@/stores/userInfo/tenantAuth";
import {useRoute} from "vue-router";

let tenantAuthDataForm = ref({
    id: '',
    tenantId: '',
    userId: ''
});
let title = ref("");

let tenantAuthSearchData = computed(() => {return useTenantAuthStore().tenantAuthSearchData});
let tenantAuthDataList = computed(() => {return useTenantAuthStore().tenantAuthDataList});

// 查询授权列表
tenantAuthInfoQuery(tenantAuthSearchData.value).then(res => {
    if (res["code"] === '200') {
        useTenantAuthStore().resetTenantAuthDataList(res.data);
    }
})

// 创建标签
let route = useRoute();
createTag(route);

function handleDelete(index, row) {
    tenantAuthDataForm.value = {
        id: row.id,
        tenantId: row.tenantId,
        userId: row.userId
    }
    useTenantAuthStore().resetTenantAuthDeleteDialog(true);
}

function changePage(index, size) {
    tenantAuthSearchData.value["pageInfo"] = {
        pageIndex: index,
        pageSize: size
    };
    tenantAuthInfoQuery(tenantAuthSearchData.value).then(res => {
        useTenantAuthStore().resetTenantAuthDataList(res.data);
    })
}

function addTenantAuthInfo() {
    tenantAuthDataForm.value = {
        id: '',
        tenantId: '',
        userId: ''
    }
    useTenantAuthStore().resetTenantAuthAddDialog(true);
}
</script>

<style scoped lang="less">
.tenantAuthContainer {
    width: 98%;
    height: 100%;
    margin: 0.2%;
    .searchContainer {
        width: 100%;
        margin-top: 1%;
    }
    .tableContainer {
        margin-left: 1%;
    }
    .insertContainer {
        margin-left: 1%;
        margin-top: 0.7%;
    }
}
</style>